<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>按钮</title>
    <link rel="stylesheet" href="./016.css" type="text/css" />
  </head>
  <body>
    <!--
      HTML元素的状态是可以动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，
      这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。
      :hover是最最常用的一个伪类。还有一个很常用的伪类是:nth-child，用于选中元素的某一个子元素。
      其他的类似:focus、:focus-within等也有一定的使用。
     -->
    <button
      data-text="Start"
      class="btn btn-primary btn-ghost btn-border-stroke btn-text-float-up"
    >
      <div class="btn-borders">
        <div class="border-top"></div>
        <div class="border-right"></div>
        <div class="border-bottom"></div>
        <div class="border-left"></div>
      </div>
      <span class="btn-text">Start</span>
    </button>
  </body>
</html>
